<template>
	<view style="background-color: #efefef;">
		<view style="background-color: #fff;">
			<view style="display: flex;justify-content: space-around;">
				<view style="width: 350rpx;">
					<u-input @click="time_btn" v-model="find.stime" border="true" type="select" placeholder='请选择开始日期' />
				</view>
				<view style="width: 350rpx;">
					<u-input @click="time_btn2" v-model="find.etime" border="true" type="select"
						placeholder='请选择结束日期' />
				</view>

			</view>
			<view style="display: flex;margin-top: 10rpx;margin-bottom: 10rpx;">
				<view style="width: 250rpx;">
					<u-input @click="reimStatus_btn" v-model="reimStatus_name" border="true" type="select"
						placeholder='客户类型' />
				</view>
				<view style="width: 250rpx;margin-bottom: 10rpx;">
					<u-input @click="operUserId_btn" v-model="operUserId_name" border="true" type="select"
						placeholder='客户' />
				</view>
				<view style="width: 250rpx;margin-bottom: 10rpx;">
					<u-input @click="moneyTypeIds_btn" v-model="moneyTypeIds_name" border="true" type="select"
						placeholder='业务员' />
				</view>

			</view>
		</view>
		<view style="display: flex;width:100% ; height:4vh;align-items: center;justify-content: flex-start;">

			<u-button style="margin-left: 20rpx;" size="mini" type="error" plain>总应收：{{totalGath}}￥</u-button>
			<u-button style="margin-left: 20rpx;" size="mini" type="success" plain>总应支：{{totalPay}}￥</u-button>
			<!-- <u-button size="mini" type="primary" @click="add_bank">添加</u-button> -->

		</view>
		<scroll-view :scroll-top="scrollTop" @scroll="scroll" style="height: 90vh;width: 100%;" scroll-y
			@scrolltolower="tabReachBottom" :refresher-enabled="true" :refresher-threshold="80"
			:refresher-background="'#efefef'" :refresher-triggered="load.triggered" @refresherrefresh="downPullRefres">
			<view class="my-list">
				<view class="no-data" v-if="dataList.length == 0"><u-empty text="没有订单数据" mode="list"></u-empty></view>
				<template v-else>
					<view class="ml-item" v-for="(row, index) in dataList" :key="row.id">
						<view class="i-title-row">
							<view>客户单位名称:{{row.companyName?row.companyName:''}}</view>
						</view>
						<view class="i-title-row">
							<view>业务负责人:{{row.dutyName?row.dutyName:''}}</view>
						</view>
						<view class="i-title-row">
							<view>业务员:{{row.serviceName?row.serviceName:''}}</view>
						</view>
						<view class="i-title-row">
							<view style="color: #ea7a19;">应收金额:{{row.gathMoney?row.gathMoney:'0'}}</view>
						</view>
						<view class="i-title-row">
							<view style="color: red;">应付金额:{{row.payMoney?row.payMoney:'0'}}</view>
						</view>
						<view class="i-title-row">
							<view style="color: #4b880f;">余额:{{row.balance?row.balance:'0'}}</view>
						</view>
						<view class="i-title-row">
							<view>首次欠款时间:{{row.firstTime?row.firstTime:''}}</view>
						</view>
						<view class="i-title-row">
							<view>客户性质:{{row.cusType?row.cusType:''}}</view>
						</view>
						<!-- <view class="i-title-row">
						
							<view>客户名称:{{ cusName_api(row.cusName)}}</view>
						
						
						</view>
						
						<view class="i-title-row">
						
							<view>银行名称:{{ row.myBankNum+'-'+row.myBankName}}</view>
						
						
						</view>
						<view class="i-title-row" style="display: flex;justify-content: space-between;">
						
							<view style="font-size: 30rpx;color: #00c3ce;">收入:{{ row.tradeInMoney}}</view>
							<view style="font-size: 30rpx;color: #ff9800;margin-left: 20rpx;">支出:{{ row.tradeOutMoney}}
							</view>
							<view style="font-size: 30rpx;color: red;margin-left: 20rpx;">金额:{{ row.balance}}</view>
						
						</view>
						<view class="i-title-row">
						
							<view style="font-size: 30rpx;color: #ff9800;" class="r-detail-btn">
								交易时间:{{row.tradeTime}}
							</view>
						
						</view>
						<view class="content">
							<view>备注:{{row.remark?row.remark:''}}</view>
						
						</view>
						
						<view class="bottom">
						
							<view :style="{'border-color': '#ffca28', 'color': '#ffca28'}" class="btn"
								@click="up_btn(row)">
								修改
							</view>
							<view :style="{'border-color': '#f00000', 'color': '#f00000'}" class="btn"
								@click="del_btn(row)">
								删除
							</view>
						</view> -->


					</view>


					<u-loadmore :status="load.status" :load-text="load.loadText" bgColor="#f2f2f2"></u-loadmore>
				</template>


			</view>
		</scroll-view>
		<view class="picker_css" v-if="findComboCusList_show">
			<u-search style="width: 20vw;" v-model="curval1" :shape="'square'" :bgColor="'#fff'"
				:borderColor="'#00c3ce'" :placeholder="'请输入客户关键字搜索并选择'" :focus="false" :height="'80rpx'"
				:color="'#00c3ce'" :maxlength="30" :margin="'16rpx'" :show-action="true" :action-text="'返回'"
				@change="onChange" @custom="picker_closeMd"></u-search>
			<view class="list-content">
				<view class="point-item" v-for="(it, index) in findComboCusList" :key="index" :data-obj="it"
					@click="picker_confirm1(it)">
					<view class="point-name">
						<u-icon name="account-fill" :color="'#00c3ce'" size="20"></u-icon>
						{{it.cusCompanySimpleName?it.cusCompanySimpleName:''}}
					</view>
					<view class="point-address">{{it.cusRealName?it.cusRealName+'-'+it.cusPhone:''}}</view>
				</view>
			</view>
		</view>


		<u-picker :params="params" @confirm="time_confirm" @cancel="time_cancel" v-model="time_show"
			:default-time="time_value" mode="time"></u-picker>
		<u-picker :params="params" @confirm="time_confirm2" @cancel="time_cancel2" v-model="time_show2"
			:default-time="time_value" mode="time"></u-picker>
		<u-select :default-value='defaultValue' @confirm="reimStatus_confirm" :label-name='"typeName"'
			:value-name='"id"' v-model="reimStatus_show" :list="reimStatusList"></u-select>
		<u-select :default-value='defaultValue2' @confirm="moneyTypeIds_confirm" :label-name='"realName"'
			:value-name='"ftUserId"' v-model="moneyTypeIds_show" :list="moneyTypeIdsList"></u-select>


	</view>
</template>

<script>
	export default {

		data() {
			return {
				find: {
					page: {
						pageNum: 1,
						pageSize: 20,
					},
					cusTypeId: '',
					etime: '',
					id: '',
					serviceMan: '',
					stime: '',
					userId: '',
				},
				totalGath: 0,
				totalPay: 0,
				dataList: [],
				load: this.U.scopy(this.C.loadmore),
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
				},
				time_show: false,
				time_show2: false,
				reimStatus_name: '',
				reimStatus_show: false,
				reimStatusList: [],
				defaultValue: [0],
				defaultValue2: [0],
				moneyTypeIds_name: '',
				moneyTypeIdsList: [],
				moneyTypeIds_show: false,
				findComboCusList_show: false,
				findComboCusList: [],
				curval1: '',
				operUserId_name: '',
			}
		},
		onReady() {

			this.find.stime = this.new_day()
			this.find.etime = this.to_day()


		},
		onLoad(e) {

		},
		// 在 App.vue 中设置页面切换监听
		onShow() {

		},
		mounted() {
			let that = this
			that.$u.api.findCusTypeCombo({}).then(res => {
				let list = res.data

				that.reimStatusList = list

				let data = {
					typeName: '全部',
					id: '全部'
				}
				that.reimStatusList.unshift(data)
			})
			that.$u.api.getServiceMans({}).then(res => {
				let list = res.data

				that.moneyTypeIdsList = list

				let data = {
					realName: '全部',
					ftUserId: '全部'
				}
				that.moneyTypeIdsList.unshift(data)
			})
			that.$u.api.findComboCusList({
				page: {
					pageNum: 1,
					pageSize: 9999,
				},
				find: ''
			}).then(res => {
				if (res.code == 1) {
					that.findComboCusList = res.data
					let data = {
						userId: '全部',
						cusCompanySimpleName: '全部'
					}
					that.findComboCusList.unshift(data)
			
				} else {
					that.findComboCusList = []
				}
			})
			this.find.stime = this.new_day()
			this.find.etime = this.to_day()
			that.queryList()

		},
		methods: {
			onChange() {
				let that = this
				that.$u.api.findComboCusList({
					page: {
						pageNum: 1,
						pageSize: 999,
					},
					find: that.curval1
				}).then(res => {
					if (res.code == 1) {
						that.findComboCusList = res.data
			
			
					} else {
						that.findComboCusList = []
					
					}
				})
			},
			picker_confirm1(e) {
				let that = this

				that.findComboCusList_data = e

				let data = e
				if(data.cusCompanySimpleName == '全部'){
					that.find.userId = ''
					that.operUserId_name = ''
				}else{
					that.find.userId = data.userId
					that.find.id = data.id
					that.operUserId_name = data.cusCompanySimpleName
				}
				
			
				


				that.findComboCusList_show = false
				that.queryList()
			},
			picker_closeMd(e) {
				this.findComboCusList_show = false
			},
			operUserId_btn(e) {
				this.curval1 = ''
				this.findComboCusList_show = true
			},

			moneyTypeIds_btn() {
				this.moneyTypeIds_show = true
			},
			moneyTypeIds_confirm(e) {
				if (e[0].value == '全部') {
					this.find.serviceMan = ''
					this.moneyTypeIds_name = ''
				} else {
					this.find.serviceMan = e[0].value
					this.moneyTypeIds_name = e[0].label
				}




				let index = 0;
				for (let i = 0; i < this.reimStatusList.length; i++) {
					if (this.reimStatusList[i].id == e[0].value) {
						index = i;
						break
					}
				}
				this.defaultValue2[0] = index;
				this.queryList()

			},

			reimStatus_confirm(e) {


				if (e[0].label == '全部') {
					this.find.cusTypeId = ''
					this.reimStatus_name = ''
				} else {
					this.find.cusTypeId = e[0].value
					this.reimStatus_name = e[0].label
				}

				let index = 0;
				for (let i = 0; i < this.reimStatusList.length; i++) {
					if (this.reimStatusList[i].id == e[0].value) {
						index = i;
						break
					}
				}
				this.defaultValue[0] = index;
				this.queryList()
				// this.reimStatus_show = false

			},
			reimStatus_btn() {
				this.reimStatus_show = true
			},
			new_day() {
				// 获取当前日期
				let currentDate = new Date();

				// 计算上个月的年份和月份
				let year = currentDate.getMonth() === 0 ? currentDate.getFullYear() - 1 : currentDate.getFullYear();
				let month = currentDate.getMonth() === 0 ? 11 : currentDate.getMonth() - 1;

				// 构建上个月的日期
				let firstDayOfLastMonth = new Date(year, month, 1);

				// 格式化为 yyyy-mm-dd
				let formattedDate =
					`${firstDayOfLastMonth.getFullYear()}-${(firstDayOfLastMonth.getMonth() + 1).toString().padStart(2, '0')}-01`;

				let formattedDate2 = `${formattedDate} 00:00:00`;
				return formattedDate2
			},
			to_day() {
				// 获取当前日期
				let currentDate = new Date();

				// 计算上个月的年份和月份
				let year = currentDate.getMonth() === 0 ? currentDate.getFullYear() - 1 : currentDate.getFullYear();
				let month = currentDate.getMonth() === 0 ? 11 : currentDate.getMonth() - 1;

				// 获取上个月的最后一天
				let lastDayOfLastMonth = new Date(year, month + 1, 0);

				// 格式化为 yyyy-mm-dd
				let formattedDate =
					`${lastDayOfLastMonth.getFullYear()}-${(lastDayOfLastMonth.getMonth() + 1).toString().padStart(2, '0')}-${lastDayOfLastMonth.getDate()}`;

				let formattedDate2 = `${formattedDate} 23:59:59`;
				return formattedDate2
			},
			time_confirm(e) {

				this.find.stime = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute + ":" + e.second;
				this.time_value = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute + ":" + e.second;
				this.time_show = false
				this.queryList()
			},
			time_confirm2(e) {

				this.find.etime = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute + ":" + e.second;
				this.time_value = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute + ":" + e.second;
				this.time_show2 = false
				this.queryList()
			},
			
			time_btn() {
				this.time_show = true
			},
			time_btn2() {
				this.time_show2 = true
			},
			time_cancel() {
				this.time_show = false
			},
			time_cancel2() {
				this.time_show2 = false
			},
			// 查询数据
			queryList(page) {
				let that = this

				// 存在，则表示刷新
				if (!page) {
					// 开始刷新
					that.load.triggered = true;
					that.find.page.pageNum = 1;
				}
				let params = that.find
				that.$u.api.sumCusGathPay(params).then(res => {
					// 第一页的时候，停止刷新
					if (!page) {
						// 停止刷新
						that.load.triggered = false;
						// 刷新则清空列表
						that.dataList = [];
					}
					if (res.code == 1) {
						that.dataList = res.data.data
						that.totalGath = res.data.totalGath
						that.totalPay = res.data.totalPay
						that.load.status = 'nomore';


					}
				});
			},

			scroll: function(e) {

				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				let that = this
				// 解决view层不同步的问题

				that.scrollTop = that.old.scrollTop

				that.$nextTick(function() {
					that.scrollTop = 0

				});


			}, // 设置-底部上滑加载数据时状态显示
			tabReachBottom() {
				let that = this;

				that.load.status = 'nomore';
			},
			// 下拉刷新
			downPullRefres() {
				// 重新查询

				this.queryList();
			},

		},



	}
</script>
<style lang="scss">
	.recognition_view {
		z-index: 9999;
		position: fixed;
		top: 650rpx;
		left: calc(100vw - 90vw);
		width: 80vw;
		height: 30vh;
		background-color: #a6a6a6;
		border-radius: 8rpx;

	}

	.recognition_css {
		z-index: 8888;
		font-weight: 700;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: column;
		top: 920rpx;
		right: 10rpx;
		border-radius: 50%;
		width: 120rpx;
		height: 120rpx;
		background-color: #00C3CE;
		position: fixed;
		color: #ffffff
	}

	.content_box {
		width: 90%;
		margin: auto;
		height: 70vh;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		overflow: auto;
	}

	.u-form-item {
		padding: 10rpx 0 !important;
	}

	.picker_css {

		width: 100vw;
		height: 100vh;
		z-index: 29999;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
	}

	.list-content {
		height: calc(100vh - 150rpx);
		overflow: auto;
		margin-top: 10rpx;

		.point-item {
			border-bottom: 2rpx solid #efefef;
			line-height: 44rpx;
			padding: 10rpx 60rpx 10rpx 20rpx;
			position: relative;

			.point-name {
				display: flex;
				font-weight: 600;
				font-size: 30rpx;
				color: #333;
			}

			.point-address {
				color: #999;
				font-size: 26rpx;
			}

			.point-collect {
				top: calc((100% - 40rpx)/2);
				right: 20rpx;
				position: absolute;
			}
		}
	}

	.bottom {
		display: flex;
		margin-top: 20rpx;
		justify-content: flex-end;
		align-items: center;

		.btn {
			line-height: 52rpx;
			padding: 0rpx 16rpx;
			border-radius: 26rpx;
			border: 2rpx solid #ff9900;
			font-size: 26rpx;
			text-align: center;
			color: #ff9900;
			;
			margin-right: 10rpx;
		}

		.more {
			align-self: center;
			flex: 1;
			margin-right: 10rpx;
		}

		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}
</style>
<style lang="less">
	.lt-btns {
		display: flex !important;
	}

	.qj-list {
		min-height: 100vh;
		padding-top: 2rpx;
	}

	.routeSimpleName {
		position: absolute;
		left: 380rpx;
		width: 200rpx;
		background: #fff;
		top: 10rpx;
		z-index: 9999;
		text-align: center;
		border-radius: 10rpx;
		border: 1px solid #00C3CE;
		color: #00C3CE;
		margin-right: 10rpx;
		display: flex;
		height: 40rpx;
		justify-content: space-between;

	}
</style>